<template>
  <div class="wrap">
    <div class="clear"></div>
    <div class="title">
          门店列表
        <div class="addpar" @click="addStore">
          <img class="add" src="../../images/main/add.png" alt> 增加门店
        </div>
    </div>
    <el-table :data="storeList" stripe style="width: 100%">
      <el-table-column align="center" width="200" prop="store_name" label="门店名称"></el-table-column>
      <el-table-column align="center"   label="房间数量">
        <template slot-scope="scope">
          <div @click="details(scope.row.id)" class="roomnum">{{scope.row.room_num}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" width="300" prop="store_address" label="门店地址"></el-table-column>
      <el-table-column align="center" prop="store_name" label="门店状态">
        <template slot-scope="scope">
          {{scope.row.states == '0' ? '开店' : '闭店'}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="region_name" label="门店区域"></el-table-column>
      <el-table-column align="center" width="200" prop="store_name" label="更新时间">
        <template slot-scope="scope">
          {{setDate(scope.row.time)}} {{setTime(scope.row.time)}}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="store_name" label="操作">
<template slot-scope="scope">
          <div>
            <el-popover placement="right" width="200" trigger="click">
              <div class="menu-list">
                <div >
                   <el-button @click="editStore(scope.row.id)" type="primary" size="mini" round>编辑</el-button>
                </div>
                <div v-if="scope.row.states == 0">
                   <el-button @click="setStore(scope.row.id,1)" type="primary" size="mini" round>闭店</el-button>
                </div>
                <div v-else>
                   <el-button @click="setStore(scope.row.id,0)" type="primary" size="mini" round>开店</el-button>
                </div>
              </div>
              <div slot="reference" class="show-menu">···</div>
            </el-popover>
          </div>
</template>
      </el-table-column>
    </el-table>
    <div :style="{
        textAlign: 'center',
        padding: '30px 0',
      }">
      <el-pagination
        background
        :page-count="pageTotal"
        layout="prev, pager, next"
        @current-change="changePage"
      ></el-pagination>
    </div>

    <div class="roomDetails" ref="roomDetails">
      <el-form class="form" labelWidth="90px">
        <div
          v-for="( item, index ) in roomList"
          :style="{
            borderTop: index != 0 ? '1px solid #ddd' : ''
          }"
          :key="index"
        >
          <el-form-item :label="'房间' + ( index + 1 ) + '名称'">{{ item.roomType }}</el-form-item>
          <el-row>
            <el-col :span="12">
              <el-form-item label="房间面积">
                <el-input :value="item.roomArea" readonly>
                  <template slot="append">约/平米</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="11" :style="{float: 'right'}">
              <el-form-item labelWidth="120px" label="建议容纳人数">
                <el-input :value="item.roomAccommodate" readonly>
                  <template slot="append">个</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="房间照片">
            <img :src="item.roomImg">
          </el-form-item>
          <el-form-item label="营业时间">
            <span v-if="item.businessHours.split ( ',' )[0] === '1'">周一</span>
            <span v-if="item.businessHours.split ( ',' )[1] === '1'">周二</span>
            <span v-if="item.businessHours.split ( ',' )[2] === '1'">周三</span>
            <span v-if="item.businessHours.split ( ',' )[3] === '1'">周四</span>
            <span v-if="item.businessHours.split ( ',' )[4] === '1'">周五</span>
            <span v-if="item.businessHours.split ( ',' )[5] === '1'">周六</span>
            <span v-if="item.businessHours.split ( ',' )[6] === '1'">周日</span>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<style type="text/scss" lang="scss" scoped>
.wrap {
  
  .roomDetails {
    display: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    .form {
      width: 500px;
      margin: 0 auto;
      /deep/ .el-form-item {
        label {
          font-size: 12px;
        }
      }
      > div {
        padding: 20px 0 50px;
        img {
          width: 300px;
          height: 150px;
        }
      }
    }
  }
  
}
</style>

<script>
import Global from "../tool/Global.vue";
import axios from "axios";
import qs from "qs"; // 将请求转换成form 表单提交形式
export default {
  data() {
    return {
      params: {
        page: 1,
        limit: 10
      },
      storeList: [],
      pageTotal: 1,
      roomList: []
    };
  },
  computed: {
    partnerId() {
      return this.$store.state.partnerId;
    }
  },
  methods: {
    details(id) {
      // this.$router.push ({
      //   path: '/main/editRoom',
      //   query: {
      //     id: id
      //   }
      // });
      let _this = this;
      axios
        .post(
          `${this.$store.state.url}/room/selectByStoreId`,
          qs.stringify({
            storeId: Number(id)
          })
        )
        .then(response => {
          let res = response.data;
          if (res.code == 0) {
            this.roomList = res.data;
          }
        });

      layer.open({
        title: "房间详情",
        type: 1,
        area: ["800px", "600px"],
        content: $(this.$refs.roomDetails),
        end() {
          _this.$refs.roomDetails.style.display = "none";
        }
      });
    },
    changePage(index) {
      this.params.page = index;
      this.getStoreList();
    },
    // 新建门店
    addStore() {
      Global.storeEdit = false;
      this.$router.push({
        path: "/main/addStore"
      });
    },

    /**
     * 编辑门店
     */
    editStore: function(id) {
      Global.storeEdit = true;
      this.$router.push({
        path: "/main/editStore",
        query: {
          storeId: id
        }
      });
    },
    /**
     * 开店or闭店
     */
    setStore: function(id, states) {
      let that = this;
      let data = {
        id: id,
        states: states
      };
      console.log(states);
      this.$confirm(`是否${states === 0 ? "开启" : "关闭"}当前店铺？`)
        .then(function() {
          axios({
            method: "post",
            url: `${that.$store.state.url}/store/updateStates`,
            data: qs.stringify(data)
          }).then(res => {
            if (res.data.code == 0) {
              that.$store.state.fn.success(res.data.msg).then(() => {
                that.getStoreList();
              });
            }
          });
        })
        .catch(() => {});
    },
    /**
     * 修改房间
     */
    editRoom: function(bol, id) {
      Global.storeId = id;

      this.$router.push({
        path: "/main/editRoom"
      });
    },
    /**
     * 获取门店列表
     */
    getStoreList: function() {
      let that = this;
      let obj = {};
      for (let i in this.params) {
        obj[i] = this.params[i];
      }
      obj.partnerId = this.partnerId;
      axios({
        method: "post",
        url: `${that.$store.state.url}/store/selectAllList`,
        data: qs.stringify(obj)
      }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          that.storeList = res.data.data;
          this.pageTotal = Math.ceil(res.data.count / 10);
        } else {
          alert(res.msg);
        }
      });
    },
    /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function(str) {
      let times = new Date(str);
      return `${times.getFullYear()}-${
        times.getMonth() + 1 < 10
          ? "0" + (times.getMonth() + 1)
          : times.getMonth() + 1
      }-${times.getDate() < 10 ? "0" + times.getDate() : times.getDate()}`;
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function(str) {
      let times = new Date(str);
      return `${
        times.getHours() < 10 ? "0" + times.getHours() : times.getHours()
      }:${
        times.getMinutes() < 10 ? "0" + times.getMinutes() : times.getMinutes()
      }:${
        times.getSeconds() < 10 ? "0" + times.getSeconds() : times.getSeconds()
      }`;
    }
  },
  mounted() {
    this.getStoreList();
  }
};
</script>
<style scoped>
.wrap {
  /* padding: 68px 136px; */
  width: 90%;
  margin: 40px auto;
}

.show-menu {
  color: #4B74FF;
  cursor: pointer;
}
.menu-list div {
  margin: 5px;
  float: left;
  box-sizing: border-box;
  width: 40%;
}
 .roomnum {
  color: #4B74FF;
  cursor: pointer;
}
.title {
  height: 32px;
  line-height: 32px;
  margin: 10px 0;
  color: #333;
  font-size: 14px;
}
.addpar {
  float: right;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  width: 114px;
  height: 32px;
  background: #4B74FF;
  border-radius: 24px;
  border: 1px solid #4B74FF;
  text-align: center;
}
</style>
